<script>
	export default {
		name: "CheckinCard",
		data() {
			return {
				streakDays: 0, // 连续打卡天数
				totalCheckinDays: 0, // 总打卡天数
				records: [] // 打卡记录列表
			};
		},
		methods: {
			fetchCheckinData() {
				this.$request({
					url: '/train/record/user/get/',
					method: 'GET',
					data: {
						batch_num: 1, // 默认请求第一页
						batch_size: 10 // 每页10条数据
					},
					success: (response) => {
						if (response.statusCode === 200) {
							const { streak_days, total_checkin_days, records } = response.data;
							this.streakDays = streak_days;
							this.totalCheckinDays = total_checkin_days;
							this.records = records;
						} else {
							console.error('获取打卡数据失败');
							console.log(response);
						}
					},
					fail: (error) => {
						console.error('请求失败', error);
					}
				});
			},
			navigateToTrainRecord() {
				uni.navigateTo({
					url: '/sub_pages/pages/train_record/train_record'
				});
			}
		},
		mounted() {
			this.fetchCheckinData(); // 组件挂载时请求数据
		}
	}
</script>

<template>
	<view class="flex-row justify-evenly view">
		<view class="flex-col group">
			<view class="flex-col items-start">
				<text class="font text_3">2025年1月19日</text>
				<text class="font_2 text_4 mt-10">今日还未训练打卡</text>
				<text class="font_2 text_5 mt-10">点击下方视频卡片中进入训练吧</text>
			</view>
			<view class="flex-col mt-30">
				<view class="flex-row self-stretch">
					<view class="group_2">
						<text class="font_2 text_6">连续打卡:</text>
						<text class="font_3 text_7">{{ streakDays }}</text> <!-- 动态绑定连续打卡天数 -->
						<text class="font_2 text_8">天</text>
					</view>
					<view class="group_3 ml-9">
						<text class="font_2 text_9">总计打卡:</text>
						<text class="font_3 text_10">{{ totalCheckinDays }}</text> <!-- 动态绑定总打卡天数 -->
						<text class="font_2 text_11">天</text>
					</view>
				</view>
				<text 
					class="self-start font_4 text_12 mt-11" 
					@click="navigateToTrainRecord"
				>打卡记录 ></text>
			</view>
		</view>
		<image class="image_7" src="/static/checkin.jpg" />
	</view>
</template>


<style scoped lang="css">
	.ml-9 {
		margin-left: 18rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.view {
		padding: 24rpx 40rpx 24rpx 40.12rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
	}

	.group {
		margin: 3.88rpx 0 6.74rpx;
	}

	.font {
		font-size: 36rpx;
		line-height: 35.22rpx;
		font-weight: 700;
		color: #000000;
	}

	.text_3 {
		line-height: 34.98rpx;
	}

	.font_2 {
		font-size: 24rpx;
		line-height: 23.44rpx;
		color: #000000;
	}

	.text_4 {
		line-height: 23.54rpx;
	}

	.text_5 {
		line-height: 23.54rpx;
	}

	.group_2 {
		line-height: 23.48rpx;
		height: 23.48rpx;
	}

	.text_6 {
		line-height: 23.48rpx;
	}

	.font_3 {
		font-size: 24rpx;
		line-height: 19.16rpx;
		font-weight: 700;
		color: #000000;
	}

	.text_7 {
		line-height: 18.86rpx;
	}

	.text_8 {
		line-height: 21.5rpx;
	}

	.group_3 {
		line-height: 23.3rpx;
		height: 23.3rpx;
	}

	.text_9 {
		line-height: 23.3rpx;
	}

	.text_10 {
		line-height: 18.78rpx;
	}

	.text_11 {
		line-height: 21.5rpx;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: Microsoft YaHei UI;
		line-height: 23.44rpx;
		color: #979797;
	}

	.text_12 {
		font-weight: 700;
		line-height: 23.16rpx;
	}

	.image_7 {
		border-radius: 24rpx;
		width: 260rpx;
		height: 260rpx;
	}
</style>